<template>
	<u-popup :show="showTip" round="28rpx" mode="bottom" @close="showTip = false">
		<i class="iconfont icon-close font32" @click="showTip = false"></i>
		<view class="modal-content">
			<view class="flex goods mt-40">
				<image :src="IMAGE_URL + '/static/login/bg.png'" class="cover"></image>
				<view class="flex column between goods-info">
					<view>
						<view class="font28 fontbold-500">高科技电子手表</view>
						<view class="font24 des">精选高级黑蓝版，一个规格，一个逗号隔开，发发发</view>
					</view>
					<!-- <view class="flex price font28">
						<text>￥</text>
						<text class="font36">63</text>
						<text>.10</text>
						<text class="font24">￥80</text>
					</view> -->
					<view class="flex price font28 fontbold-500" style="height: auto;">
						<view>定金￥50</view>
						<view class="price-line"></view>
						<view>预售价￥789.2</view>
					</view>
					
				</view>
			</view>
			<view class="flex step mt-40 font24">
				<view class="flex step-num">1</view>
				<view style="margin-right: 20rpx;">付定金 7月1日 00:00截止</view>
				<view class="flex step-num">2</view>
				<view>
					<view>付定金 7月1日 00:00截止</view>
					<view class="font20">30天内付尾款</view>
				</view>
			</view>
			<view class="mt-40">
				<view class="font30 fontbold-500">数量</view>
				<view class="flex start buy-type">
					<view class="flex item font28" v-for="item in 6" :key="item">
						<view>3袋</view>
						<view class="price">￥21</view>
					</view>
				</view>
			</view>
			<view class="mt-40">
				<view class="flex between">
					<view class="font30 fontbold-500">购买数量</view>
					<num-box-vue></num-box-vue>
				</view>
				<view class="flex buy-tip">即将售罄</view>
			</view>
		</view>
		<view class="modal-footer">
			<view class="flex linear-btn fontbold-500" @click="showTip = false">{{type === 'cart' ? '加入购物车' : '立即购买'}}</view>
		</view>
	</u-popup>
</template>

<script>
	import numBoxVue from './numBox.vue'
	import appConfig from '@/config/app.js'
	
	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				showTip: false,
				info: [],
				type: ''
			}
		},
		components: {
			numBoxVue
		},
		mounted() {
		},
		methods: {
			open(type, info) {
				this.type = type
				this.info = info
				this.showTip = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-close {
		position: absolute;
		right: 32rpx;
		top: 40rpx;
	}
	
	.mt-40 {
		margin-top: 40rpx;
	}
	
	.modal-content {
		padding: 0 32rpx;
		box-sizing: border-box;
		
		.goods {
			height: 200rpx;
			
			.cover {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			
			.goods-info {
				height: 100%;
				align-items: flex-start;
				width: 100%;
			}
			
			.des {
				color: $uni-text-color-grey;
				margin-top: 16rpx;
			}
			
			.price {
				height: 48rpx;
				border-radius: 10rpx;
				color: $uni-text-color-red;
				align-items: baseline;
				font-weight: 500;
				
				.font24 {
					color: $uni-text-color-grey;
					text-decoration-line: line-through;
					margin-left: 4rpx;
				}
				
				.price-line {
					height: 24rpx;
					width: 2rpx;
					margin: 0 12rpx;
					background: #999;
				}
			}
		}
		
		.buy-type {
			flex-wrap: wrap;
			
			.item {
				margin-right: 28rpx;
				padding: 12rpx 20rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 12rpx;
				margin-top: 20rpx;
				
				.price {
					margin-left: 20rpx;
					color: #FF4141;
				}
			}
			
			.active {
				background: #FFEFD5;
				border-radius: 12rpx;
			}
		}
		
		.buy-tip {
			font-size: 24rpx;
			color: $uni-text-color-grey;
			margin-top: 12rpx;
			justify-content: flex-end;
		}
		
		.step {
			height: 84rpx;
			background: #FFF2F2;
			border-radius: 16rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			.step-num {
				width: 34rpx;
				height: 34rpx;
				background: #FF4040;
				border-radius: 50%;
				color: $uni-text-color-inverse;
				margin-right: 8rpx;
			}
			
			.font20 {
				color: $uni-text-color-grey1;
			}
		}
	}
	
	.modal-footer {
		padding: 60rpx 32rpx 8rpx;
		box-sizing: border-box;
		
		.linear-btn {
			width: 100%;
			height: 76rpx;
			background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
			border-radius: 60rpx;
			font-size: 36rpx;
			color: $uni-text-color-inverse;
		}
	}
</style>